<template>
  <div>
    <el-form ref="form" :model="searchData" label-width="120px" class="u-p-t-20" size="small" :label-position="device==='mobile'?'top':'left'">
      <el-row :gutter="10">

        <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
          <el-form-item label="微信退款单号">
            <el-input v-model="searchData['refund_id like']" placeholder="请输入微信退款单号" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
          <el-form-item label="商户退款单号">
            <el-input v-model="searchData['out_refund_no like']" placeholder="请输入商户退款单号" />
          </el-form-item>
        </el-col>

        <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
          <el-form-item label="退款金额">
            <el-input v-model="searchData.refund_fee[0]" style="width: calc(50% - 14px)" placeholder="最低金额" />
            <span style="padding:0 10px">-</span>
            <el-input v-model="searchData.refund_fee[1]" style="width:  calc(50% - 14px)" placeholder="最高金额" />
          </el-form-item>
        </el-col>
        <template v-if="showMore">
          <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
            <el-form-item label="订单金额">
              <el-input v-model="searchData.total_fee[0]" style="width: calc(50% - 14px)" placeholder="最低金额" />
              <span style="padding:0 10px">-</span>
              <el-input v-model="searchData.total_fee[1]" style="width:  calc(50% - 14px)" placeholder="最高金额" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
            <el-form-item label="微信订单号">
              <el-input v-model="searchData['transaction_id like']" placeholder="请输入微信订单号" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
            <el-form-item label="商户订单号">
              <el-input v-model="searchData['out_trade_no like']" placeholder="请输入商户订单号" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
            <el-form-item label="创建时间">
              <el-date-picker
                v-model="searchData.create_time"
                type="datetimerange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['12:00:00']"
                value-format="timestamp"
                style="width: 100%;"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
            <el-form-item label="退款备注">
              <el-input v-model="searchData['refund_desc like']" placeholder="请输入退款备注" />
            </el-form-item>
          </el-col>
        </template>
      </el-row>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">筛选</el-button>
        <el-button @click="clear">清空</el-button>
        <dk-fold-link v-model="showMore" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { clone, multiply } from 'xe-utils'

export default {
  name: 'PlatformSearchForm',
  data() {
    return {
      searchData: {
        total_fee: {},
        refund_fee: {}
      },
      showMore: false
    }
  },
  computed: {
    device() {
      return this.$store.state.app.device
    }
  },
  methods: {
    onSubmit() {
      const data = clone(this.searchData, true)
      if (data.total_fee[0]) {
        data.total_fee[0] = multiply(data.total_fee[0], 100)
      }
      if (data.total_fee[1]) {
        data.total_fee[1] = multiply(data.total_fee[1], 100)
      }

      if (data.refund_fee[0]) {
        data.refund_fee[0] = multiply(data.refund_fee[0], 100)
      }
      if (data.refund_fee[1]) {
        data.refund_fee[1] = multiply(data.refund_fee[1], 100)
      }

      this.$emit('onSearch', data)
    },
    clear() {
      this.searchData = {
        total_fee: {},
        refund_fee: {}
      }
      this.$emit('onSearch', this.searchData)
    }
  }
}
</script>

<style scoped lang="scss">
.showButton {
  margin: 0 10px;
}
</style>
